<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>JSON 格式化校验</title>
    <script src="/js/json2.js"></script>
    <script src="/js/jsonlint/jsonlint.js"></script>

    <style>
        body { font-family: sans-serif; }

        #result { padding: 1em; }

        .pass { background-color: #efe; color: #393; border: 2px solid #393; }

        .fail { background-color: #fee; color: #933; border: 2px solid #933; }

        textarea { width: 100%; }
    </style>
</head>

<body>
    <h1>JSON 格式化校验</h1>

    <textarea id="source" rows="20" cols="50"> </textarea>
    <p>
        <button id="button">格式化校验</button>
        <input type="checkbox" value="yes" id="reformat" /><label for="reformat">格式化</label>
    </p>
    <h2>结果</h2>
    <pre id="result"></pre>

    <script>
        window.onload = function () {
            document.getElementById("button").onclick = function () {
                try {
                    var result = jsonlint.parse(document.getElementById("source").value);
                    if (result) {
                        console.log(result);

                        document.getElementById("result").innerHTML = "JSON是有效的！";
                        document.getElementById("result").className = "pass";
                        if (document.getElementById("reformat").checked) {
                            document.getElementById("source").value = JSON.stringify(result, null, "  ");
                        }
                    }
                } catch (e) {
                    debugger;
                    document.getElementById("result").innerHTML = e;
                    document.getElementById("result").className = "fail";
                }
            };
        }
    </script>
</body>


</html>